<template>
	<view>
		<view class="header bg-gradual-blue">
			<view class="head-bar">
				<view class="back-box" :style="{'margin-top':menuButtonTop}">
					<u-icon name="arrow-left" @click="back" size="40" color="#ffffff"></u-icon>
				</view>
				<view class="u-text-center">
					<text class="u-font-34"></text>
				</view>
			</view>
			<view class="u-text-center u-p-t-30 u-p-b-60">
				<text class="u-font-40">数据看板</text>
				<view class="u-p-t-20"><text class="u-font-24">数据更新于：{{time}}</text></view>
			</view>
			<view class="filter-bar u-flex">
				<view class="item">
					<picker @change="bindPickerChange" :value="cityIndex" :range="cityArr" range-key="name">
						<u-icon name="order"></u-icon>
						<text class="u-p-l-4 u-p-r-10 u-font-24">{{cityArr[cityIndex].name}}</text>
						<u-icon name="arrow-down" color="#fff" size="20"></u-icon>
					</picker>
				</view>
				<view class="item u-m-r-0">
					<picker @change="confirm" :value="timeType" :range="list" range-key="label">
						<view>
							<u-icon name="calendar"></u-icon>
							<text class="u-p-l-4 u-p-r-10 u-font-24">{{list[timeType].label}}</text>
							<u-icon name="arrow-down" color="#fff" size="20"></u-icon>
						</view>
					</picker>
				</view>
				<view class="u-flex-1"></view>
				<view class="item" @click="filterShow = true">
					<view>
						<u-icon name="grid-fill"></u-icon>
						<text class="u-p-l-4 u-p-r-10 u-font-24">筛选</text>
						<u-icon name="arrow-down" color="#fff" size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="u-p-t-30" v-if="timeType == 9">
				<u-alert-tips type="warning" :description="`已选择时间范围：${startDate} 至 ${endDate}`"></u-alert-tips>
			</view>
		</view>
		<!-- 上门订单与站点订单数据 -->
		<view class="total-weight">
			<view class="grid-box">
				<view class="u-p-b-20"><text class="iconfont icon-tongji3 u-m-r-10"></text><text class="total-title">回收总览</text></view>
				<view class="u-flex">
					<view class="cell u-flex-1" style="background: #e83e8c14;">
						<view class="number"><text class="u-font-40">{{formatNumberWithTenThousand(appBigDataIndex.weight)}}</text></view>
						<view class="title u-font-24">总重量(KG)</view>
					</view>
					<view class="divider"></view>
					<view class="cell u-flex-1" style="background: #28a74517;">
						<view class="number"><text class="u-font-40">{{appBigDataIndex.orderquantity}}</text></view>
						<view class="title u-font-24">订单数(条)</view>
					</view>
					<view class="divider"></view>
					<view class="cell u-flex-1" style="background: #007bff17;">
						<view class="number"><text class="u-font-40">{{appBigDataIndex.peoplequantity}}</text></view>
						<view class="title u-font-24">服务人次(人)</view>
					</view>
				</view>
			</view>
			<view class="grid-box">
				<view class="u-p-b-20"><text class="iconfont icon-tongji3 u-m-r-10"></text><text class="total-title">站点/回收点数据</text></view>
				<view class="u-flex">
					<view class="cell u-flex-1" style="background: #e83e8c14;">
						<view class="number"><text class="u-font-40">{{formatNumberWithTenThousand(appBigDataIndex.store.weight)}}</text></view>
						<view class="title u-font-24">站点回收量(KG)</view>
					</view>
					<view class="divider"></view>
					<view class="cell u-flex-1" style="background: #28a74517;">
						<view class="number"><text class="u-font-40">{{appBigDataIndex.store.orderquantity}}</text></view>
						<view class="title u-font-24">站点订单(条)</view>
					</view>
					<view class="divider"></view>
					<view class="cell u-flex-1" style="background: #007bff17;">
						<view class="number"><text class="u-font-40">{{appBigDataIndex.store.peoplequantity}}</text></view>
						<view class="title u-font-24">站点服务人次</view>
					</view>
				</view>
				<view class="progress-box u-p-t-10" :class="on?'on':''">
					<view class="progress-item" v-for="(item,index) in appBigDataIndexStore" :key="index" @click="orderDetails(item,index)">
						<view class="u-flex" style="line-height: 1em;">
							<view class="u-flex-1 name">{{item.title}}</view>
							<view class="number"><text class="u-font-32">{{item.weight}}</text><text class="u-font-24">KG</text></view>
						</view>
						<view class="u-flex u-p-b-10">
							<view class="u-flex-1">
								<u-line-progress :striped="true" :percent="percent(item.weightratio)" :striped-active="true" :show-percent="false" :height="20" active-color="#10beca"></u-line-progress>
							</view>
							<text class="u-tips-color u-font-24 u-p-l-20">{{percent(item.weightratio)}}%</text>
						</view>
						<view class="u-flex" style="line-height: 1em;">
							<text class="u-tips-color u-font-24 u-flex-1">共计<text class="u-font-bold">{{item.orderquantity}}</text>条订单</text>
							<text class="u-tips-color u-font-24">
								<text class="u-p-r-5">查看订单数据</text>
								<text class="iconfont icon-youjiantou u-font-24"></text>
							</text>
						</view>
					</view>
				</view>
				<view class="more u-text-center u-tips-color u-p-t-30" v-if="appBigDataIndex.store.data.length > 5 && on == false" @click="on = true">
					<text class="u-p-r-10">查看更多(共{{appBigDataIndex.store.data.length}}条)</text>
					<u-icon name="arrow-down" size="20"></u-icon>
				</view>
			</view>
			<view class="grid-box">
				<view class="u-p-b-20"><text class="iconfont icon-tongji3 u-m-r-10"></text><text class="total-title">线上订单</text></view>
				<view class="u-flex">
					<view class="cell u-flex-1" style="background: #e83e8c14;">
						<view class="number"><text class="u-font-40">{{appBigDataIndex.onsite.weight}}</text></view>
						<view class="title u-font-24">总重量(KG)</view>
					</view>
					<view class="divider"></view>
					<view class="cell u-flex-1" style="background: #28a74517;">
						<view class="number"><text class="u-font-40">{{appBigDataIndex.onsite.orderquantity}}</text></view>
						<view class="title u-font-24">订单数(条)</view>
					</view>
					<view class="divider"></view>
					<view class="cell u-flex-1" style="background: #007bff17;">
						<view class="number"><text class="u-font-40">{{appBigDataIndex.onsite.peoplequantity}}</text></view>
						<view class="title u-font-24">服务人次(人)</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 客户组数据 -->
		<view class="total-weight u-m-t-0" v-if="loadEnterpriseData">
			<view class="grid-box">
				<view class="u-p-b-20"><text class="iconfont icon-tongji3 u-m-r-10"></text><text class="total-title">客户组回收数据</text></view>
				<view class="u-flex">
					<view class="cell u-flex-1" style="background: #e83e8c14;">
						<view class="number"><text class="u-font-40">{{formatNumberWithTenThousand(enterprise.weight)}}</text></view>
						<view class="title u-font-24">总重量(KG)</view>
					</view>
					<view class="divider"></view>
					<view class="cell u-flex-1" style="background: #28a74517;">
						<view class="number"><text class="u-font-40">{{enterprise.orderquantity}}</text></view>
						<view class="title u-font-24">订单数(条)</view>
					</view>
					<view class="divider"></view>
					<view class="cell u-flex-1" style="background: #007bff17;">
						<view class="number"><text class="u-font-40">{{enterprise.peoplequantity}}</text></view>
						<view class="title u-font-24">服务人次(人)</view>
					</view>
				</view>
				<view class="u-tabs-box u-border-bottom">
					<u-tabs-swiper activeColor="#10beca" ref="tabs"
						:list="enterpriseType" :current="enterpriseCurrent" @change="(index)=>{enterpriseCurrent = index;}" :is-scroll="false" swiperWidth="750">
					</u-tabs-swiper>
				</view>
				<view class="progress-box u-p-t-10" :class="on1?'on':''" v-if="enterprise.type.length > 0">
					<view class="progress-item" v-for="(item,index) in enterpriseTypeList" :key="index" @click="orderDetails(item)">
						<view class="u-flex" style="line-height: 1em;">
							<view class="u-flex-1 name">{{item.title}}</view>
							<view class="number"><text class="u-font-32">{{item.weight}}</text><text class="u-font-24">KG</text></view>
						</view>
						<view class="u-flex u-p-b-10">
							<view class="u-flex-1">
								<u-line-progress :striped="true" :percent="percent(item.weightratio)" :striped-active="true" :show-percent="false" :height="20" active-color="#10beca"></u-line-progress>
							</view>
							<text class="u-tips-color u-font-24 u-p-l-20">{{percent(item.weightratio)}}%</text>
						</view>
						<view class="u-flex" style="line-height: 1em;">
							<text class="u-tips-color u-font-24 u-flex-1">共计<text class="u-font-bold">{{item.orderquantity}}</text>条订单</text>
							<text class="u-tips-color u-font-24">
								<text class="u-p-r-5">查看订单数据</text>
								<text class="iconfont icon-youjiantou u-font-24"></text>
							</text>
						</view>
					</view>
					
					<u-empty v-if="enterpriseTypeList.length == 0" text="没有查询到相关数据" mode="list"></u-empty>
				</view>
				<view class="more u-text-center u-tips-color u-p-t-30" v-if="enterpriseTypeList.length > 5 && on1 == false" @click="on1 = true">
					<text class="u-p-r-10">查看更多(共{{enterpriseTypeList.length}}条)</text>
					<u-icon name="arrow-down" size="20"></u-icon>
				</view>
			</view>
		</view>
		<!-- 区域数据 -->
		<view class="total-weight u-m-t-0" v-if="loadAreaData">
			<view class="grid-box">
				<view class="u-p-b-20"><text class="iconfont icon-tongji3 u-m-r-10"></text><text class="total-title">按{{cityArr[cityIndex].name}}下级汇总</text></view>
				<view class="u-flex">
					<view class="cell u-flex-1" style="background: #e83e8c14;">
						<view class="number"><text class="u-font-40">{{formatNumberWithTenThousand(area.weight)}}</text></view>
						<view class="title u-font-24">总重量(KG)</view>
					</view>
					<view class="divider"></view>
					<view class="cell u-flex-1" style="background: #28a74517;">
						<view class="number"><text class="u-font-40">{{area.orderquantity}}</text></view>
						<view class="title u-font-24">订单数(条)</view>
					</view>
					<view class="divider"></view>
					<view class="cell u-flex-1" style="background: #007bff17;">
						<view class="number"><text class="u-font-40">{{area.peoplequantity}}</text></view>
						<view class="title u-font-24">服务人次(人)</view>
					</view>
				</view>
				<view class="progress-box u-p-t-10" :class="on2?'on':''">
					<view class="progress-item" v-for="(item,index) in area.data" :key="index" @click="orderDetails(item)">
						<view class="u-flex" style="line-height: 1em;">
							<view class="u-flex-1 name">{{item.title}}</view>
							<view class="number"><text class="u-font-32">{{item.weight}}</text><text class="u-font-24">KG</text></view>
						</view>
						<view class="u-flex u-p-b-10">
							<view class="u-flex-1">
								<u-line-progress :striped="true" :percent="percent(item.weightratio)" :striped-active="true" :show-percent="false" :height="20" active-color="#10beca"></u-line-progress>
							</view>
							<text class="u-tips-color u-font-24 u-p-l-20">{{percent(item.weightratio)}}%</text>
						</view>
						<view class="u-flex" style="line-height: 1em;">
							<text class="u-tips-color u-font-24 u-flex-1">共计<text class="u-font-bold">{{item.orderquantity}}</text>条订单</text>
							<text class="u-tips-color u-font-24">
								<text class="u-p-r-5">查看订单数据</text>
								<text class="iconfont icon-youjiantou u-font-24"></text>
							</text>
						</view>
					</view>
					
					<u-empty v-if="area.data.length == 0" text="没有查询到相关数据" mode="list"></u-empty>
				</view>
				<view class="more u-text-center u-tips-color u-p-t-30" v-if="area.data.length > 5 && on2 == false" @click="on2 = true">
					<text class="u-p-r-10">查看更多(共{{area.data.length}}条)</text>
					<u-icon name="arrow-down" size="20"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="u-p-30">
			<u-loadmore :status="loadStatus"></u-loadmore>
		</view>
		<!-- 时间选择 -->
		<!-- <u-select v-model="show" :list="list" @confirm="confirm" z-index="99999"></u-select> -->
		<!-- 自定义时间范围选择 -->
		<u-calendar v-model="show2" mode="range" active-bg-color="rgb(16,190,202)" range-bg-color="rgba(16,190,202,0.13)" range-color="rgb(16,190,202)" @change="change"></u-calendar>
		<!-- 筛选条件 -->
		<u-popup v-model="filterShow" mode="right" length="80%">
			<view class="filter-container" :style="{'margin-top':menuButtonTop}">
				<view class="u-m-b-30" :style="{'height':menuButtonHeight,'line-height':menuButtonHeight}"><text class="u-font-32">选择筛选条件</text></view>
				<view class="default-filters">
					<!-- 地址类型 -->
					<view class="item u-border-bottom">
						<view class="u-p-b-10">
							<view><text class="tips-txt u-font-24">单位用户统计路径</text></view>
							<view><text class="tips-txt u-font-20">注：只影响单位用户数据，一般用户数据都按订单所属地区统计</text></view>
						</view>
						<view class="tag-con">
							<view class="cell" :class="item.check == true?'on':''" v-for="(item,index) in cityTypeOptions" :key="index" @click="choose(item,'cityTypeOptions','cityType')">
								<text>{{item.label}}</text>
							</view>
						</view>
					</view>
					<!-- 用户类型 -->
					<view class="item u-border-bottom">
						<view class="u-p-b-10">
							<view><text class="tips-txt u-font-24">用户类型</text></view>
						</view>
						<view class="tag-con">
							<view class="cell" :class="item.check == true?'on':''" v-for="(item,index) in userTypeOption" :key="index" @click="choose(item,'userTypeOption','userType')">
								<text>{{item.label}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonHeight: '32px',
				menuButtonTop: '32px',
				/*  */
				on: false,
				on1: false,
				on2: false,
				/* 筛选条件 */
				time: '',
				label: '全部',
				timeType: 1,
				startDate: '',
				endDate: '',
				type: [], //用户类型 空或null为不限(散客无效)\n\n企业 = 1,\n学校 = 2,\n机关 = 3,\n环卫 = 4,
				loadStatus: 'nomore',
				filterShow: false,
				onlyCountNextCity: false, //是否只统计下级城市
				cityType: 0, //地址类型 0.企业所属地区 1.订单所属地区
				cityTypeOptions: [ //地址类型筛选
					{
						label: '用户所属地区',
						value: 0,
						check: true
					},
					{
						label: '订单所属地区',
						value: 1,
						check: false
					},
				],
				userType: 0,
				userTypeOption: [
					{
						label: '不限',
						value: 0,
						check: true
					},
					{
						label: '注册用户',
						value: 1,
						check: false
					},
					{
						label: '散客',
						value: 2,
						check: false
					}
				],
				
				// 上门订单与站点订单
				appBigDataIndex:{
					onsite:{},
					store:{
						data: []
					}
				},
				appBigDataIndexStore: [],
				// 客户组回收数据
				loadEnterpriseData: false,
				enterpriseCurrent: 0,
				enterpriseType: [],
				enterprise:{
					type: [
						{
							data: []
						}
					]
				},
				// 区域回收数据
				loadAreaData: false,
				area:{
					
				},
				list: [{
						value: 0,
						label: '全部'
					},
					{
						value: 1,
						label: '今日'
					},
					{
						value: 2,
						label: '昨日'
					},
					{
						value: 3,
						label: '本月'
					},
					{
						value: 4,
						label: '上月'
					},
					{
						value: 5,
						label: '本季度'
					},
					{
						value: 6,
						label: '上季度'
					},
					{
						value: 7,
						label: '本年'
					},
					{
						value: 8,
						label: '上年'
					},
					{
						value: 9,
						label: '自定义时间'
					}
				],
				show2: false,
				/* 选择分站 */
				cityArr: [
					{
						id: 0,
						name: '全部'
					}
				],
				cityIndex: 0,
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menuButtonTop = wx.getMenuButtonBoundingClientRect().top + 'px'
			this.menuButtonHeight = wx.getMenuButtonBoundingClientRect().height + 'px'
			// #endif
			this.getCitys().then(()=>{
				// 恢复保存的筛选条件
				this.restoreFilterConditions();
				this.getDataBoard()
				// this.getEnterpriseBoard()
			})
		},
		beforeDestroy() {
			// 保存筛选条件
			this.saveFilterConditions();
		},
		onPullDownRefresh() {
			return this.getDataBoard().then(() => {
				// this.getEnterpriseBoard()
				uni.showToast({
					title: '更新成功',
					icon: "none"
				})
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			})
		},
		onReachBottom(e) {
			// this.reachBottom()
			if(this.loadEnterpriseData == false){
				this.getEnterpriseBoard()
			}
			if(this.loadAreaData == false){
				this.getAreaBoard()
			}
		},
		computed:{
			enterpriseTypeList(){
				try {
					if(this.enterprise.type[this.enterpriseCurrent].data.length > 0){
						return this.enterprise.type[this.enterpriseCurrent].data.sort((a,b)=>b.weight - a.weight)
					}else{
						return []
					}
				} catch (error) {
					//TODO handle the exception
					return []
				}
				
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			// 计算所占百分比
			percent(weight,arrData) {
				// let total = 0
				// arrData.forEach((item)=>{
				// 	total+= Number(item.weight)
				// })
				// if (total > 0) {
				// 	return Number((weight / total * 100).toFixed(2))
				// } else {
				// 	return 0
				// }
				// console.log('percent',weight)
				return Number((weight * 100).toFixed(2))
			},
			bindPickerChange(e) {
				// 选择站点分类
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.cityIndex = e.detail.value
				this.getDataBoard()
			},
			confirm(e) {
				// 选择时间类型
				this.timeType = e.detail.value
				if (this.timeType == 9) {
					this.show2 = true
				} else {
					this.getDataBoard()
				}
			},
			change(e) {
				// 选择自定义时间范围
				console.log(e);
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.getDataBoard()
			},
			choose(item,options,type){
				this[options].map((cell)=>{
					cell.check = false
				})
				item.check = true
				this[type] = item.value
				console.log(this[options],item)
				this.getDataBoard()
				
				this.filterShow = false
			},
			// 保存筛选条件到本地存储
			saveFilterConditions() {
				const filterConditions = {
					timeType: this.timeType,
					startDate: this.startDate,
					endDate: this.endDate,
					cityIndex: this.cityIndex,
					// type: this.type,
					// cityType: this.cityType
				};
				uni.setStorageSync('boardFilterConditions', filterConditions);
				console.log('保存筛选条件：',uni.getStorageSync('boardFilterConditions'))
			},
			
			// 从本地存储恢复筛选条件
			restoreFilterConditions() {
				const savedConditions = uni.getStorageSync('boardFilterConditions');
				if (savedConditions) {
					this.timeType = savedConditions.timeType !== undefined ? savedConditions.timeType : this.timeType;
					this.startDate = savedConditions.startDate || this.startDate;
					this.endDate = savedConditions.endDate || this.endDate;
					this.cityIndex = savedConditions.cityIndex !== undefined ? savedConditions.cityIndex : this.cityIndex;
					this.type = savedConditions.type || this.type;
					this.cityType = savedConditions.cityType !== undefined ? savedConditions.cityType : this.cityType;
				}
			},
			getCitys() {
				// 获取可选地区列表
				return this.$store.dispatch('getDetails').then((res)=>{
					// this.$refs.withdrawal.getStatistics()
					console.log('board页面成功获取用户详情：',res)
					this.time = this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss');
					this.cityArr = []
					res.databoardcity.forEach((item)=>{
						this.cityArr.push({
							id: item.cityid,
							name: item.cityname
						})
					})
				})
			},
			// 获取上门订单与站点订单数据
			getDataBoard() {
				this.loadEnterpriseData = false
				this.loadAreaData = false
				return this.$u.post("/Statistics/AppBigData/Index", {
					"timeType": this.timeType,
					"startDate": this.startDate,
					"endDate": this.endDate,
					"cityId": this.cityArr[this.cityIndex]?.id,
					"enterprisetype": this.type,
					"cityType": this.cityType,
					"userType": this.userType,
					"onlyCountNextCity": this.onlyCountNextCity
				}).then((res) => {
					this.appBigDataIndex = res
					this.appBigDataIndexStore = res.store.data.sort((a,b)=>b.weight - a.weight)
					
					// 防止因高度过低触发不了触底加载事件
					if(this.appBigDataIndexStore.length < 3){
						this.getEnterpriseBoard()
					}
				})
			},
			// 获取客户组回收数据
			getEnterpriseBoard(){
				this.loadStatus = "loading"
				return this.$u.post("/Statistics/AppBigData/Enterprise", {
					"timeType": this.timeType,
					"startDate": this.startDate,
					"endDate": this.endDate,
					"cityId": this.cityArr[this.cityIndex]?.id,
					"enterprisetype": this.type,
					"cityType": this.cityType,
					"userType": this.userType,
					"onlyCountNextCity": this.onlyCountNextCity
				}).then((res) => {
					this.enterprise = res
					this.enterprise.type = res.type.filter((item)=>item.data.length > 0)
					this.loadEnterpriseData = true
					this.enterpriseType = []
					res.type.forEach((item,index)=>{
						this.enterpriseType.push({
							value: index,
							name: item.type
						})
					})
					this.loadStatus = "nomore"
				})
			},
			// 获取区域回收数据
			getAreaBoard(){
				this.loadStatus = "loading"
				return this.$u.post("/Statistics/AppBigData/City", {
					"timeType": this.timeType,
					"startDate": this.startDate,
					"endDate": this.endDate,
					"cityId": this.cityArr[this.cityIndex]?.id,
					"enterprisetype": this.type,
					"cityType": this.cityType,
					"userType": this.userType,
					// "onlyCountNextCity": this.onlyCountNextCity
					"onlyCountNextCity": true
				}).then((res) => {
					this.area = res
					this.area.data = res.data.sort((a,b)=>b.weight - a.weight)
					this.loadAreaData = true
					this.loadStatus = "nomore"
				})
			},
			orderDetails(item,index){
				console.log('orderDetails:',item,index)
				uni.navigateTo({
					url: `/pages/my/board/order/order?id=${item.listreqparam.id}&type=${item.listreqparam.type}&cityType=${this.cityType}&cityId=${this.cityArr[this.cityIndex].id}&enterprisetype=${this.type}&timeType=${this.timeType}&startDate=${this.startDate}&endDate=${this.endDate}`
				})
			},
			formatNumberWithTenThousand(num) {
			    // 检查数字是否有效
			    if (isNaN(num)) {
			        return '--';
			    }
			
			    // 如果数字小于10000，则直接返回原数字
			    if (num < 10000) {
			        return num.toString();
			    }
			
			    // 计算数值并保留一位小数
			    const value = num / 10000;
			    const formattedValue = value.toFixed(2);
			
			    // 返回格式化的字符串
			    return `${formattedValue}万`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background-color: #fff;
		padding: 60rpx 30rpx 120rpx 30rpx;
		margin-bottom: 10rpx;
		padding-top: calc(44px + var(--status-bar-height));
		position: relative;
		border-bottom-right-radius: 60rpx;

		.head-bar {
			height: 44rpx;
		}
	}

	.back-box {
		margin-top: calc(30rpx + var(--status-bar-height));
		position: absolute;
		top: 0;
		left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// width: 70rpx;
		// height: 70rpx;
		// background: rgba(0,0,0,0.2);
		border-radius: 50%;

		.text {
			color: #ffffff;
		}
	}

	.total-weight {
		position: relative;
		margin-top: -120rpx;

		.cell {
			padding: 10px 0;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			text-align: center;
		}

		.number {
			margin-top: 0;
			margin-bottom: 10rpx;
		}

		.divider {
			// width: 1rpx;
			height: 80rpx;
			background-color: #f1f1f1;
			margin: 0 10rpx;
		}
	}

	.total-title {
		font-size: 32rpx;
		color: #000;
	}
	
	.filter-bar {
		display: flex;

		// justify-content: space-between;
		.item {
			background-color: rgba(241, 241, 241, 0.32);
			padding: 8rpx 32rpx;
			border-radius: 28rpx;
			margin-right: 10rpx;
		}
	}

	.board {
		padding-bottom: 30rpx;
	}

	// 宫格展示
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		margin-top: 30rpx;

		.title {
			font-size: 28rpx;
			color: $u-tips-color;
		}

		.number {
			margin-top: 10rpx;
		}
	}
	
	.progress-box{
		.progress-item:nth-child(1),.progress-item:nth-child(2),.progress-item:nth-child(3),.progress-item:nth-child(4),.progress-item:nth-child(5){
			height: initial!important;
			border-bottom: 1px dashed #f1f1f1!important;
			padding-bottom: 20rpx!important;
			padding-top: 20rpx!important;
		}
		&.on{
			>.progress-item{
				height: initial!important;
				border-bottom: 1px dashed #f1f1f1!important;
				padding-bottom: 20rpx!important;
				padding-top: 20rpx!important;
			}
		}
		
		.progress-item {
			border-bottom: 1px dashed #f1f1f1;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			transition: all 0.3s;
			height: 0;
			overflow: hidden;
			padding: 0;
			border: 0;
			
			.name {
				font-size: 32rpx;
			}
		}
	}
	.filter-container{
		width: 100%;
		padding: 30rpx;
		z-index: 99;
		// background: #fff;
		// border-bottom-left-radius: 20rpx;
		// border-bottom-right-radius: 20rpx;
		// box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
		// padding-top: calc(30px + var(--status-bar-height));
		padding-top: 0;
		.item{
			padding-bottom: 20rpx;
			margin-bottom: 30rpx;
		}
		.tag-con{
			display: flex;
			flex-wrap: wrap;
			.cell{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 60rpx;
				padding: 20rpx;
				border: 1px solid $u-border-color;
				margin: 5rpx 10rpx 10rpx 0;
				border-radius: 10rpx;
				font-size: 24rpx;
				&.on{
					color: $u-color-blue;
					border-color: $u-color-blue;
				}
			}
		}
		.bottom-btn{
			display: flex;
			margin-top: 30rpx;
			.btn{
				flex: 1;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
				&.cancel{
					background-color: $u-color-light;
				}
				&.confirm{
					background-color: $u-color-blue;
					color: #fff;
				}
			}
		}
	}
</style>